<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    .box {
      width: 500px;
      height: 280px;
      margin: 100px auto;
    }
    ul li {
      list-style: none;
      float: left;
    }
    a {
      box-sizing: border-box;
      display: block;
      text-decoration: none;
      line-height: 30px;
      width: 100px;
      text-align: center;
      background: rgb(86, 137, 233);
    }

    a:hover {
      color: white;
      opacity: .8;
    }
    
    #content li {
      display: none;
    }
    #content li:nth-child(1) {
      display: block;
    }
    #content li.on{
      display: block!important;
    }
  </style>
</head>

<body>
  <div class="box">
    <ul id="order">
      <!-- 注意，a标签href属性不要写成空，href会覆盖onclick事件，自动刷新页面。 -->
      <!-- 解决办法：href="#"
        href="javascript:void(0)",
        或者onclick函数末尾返回false, -->
      <li><a href="#">First</a></li>   
      <li><a href="#">Second</a></li>
      <li><a href="#">Third</a></li>
      <li><a href="#">Forth</a></li>
      <li><a href="#">Fifth</a></li>
    </ul>
    <ul id="content">
      <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/20210301213131.png" alt=""></li>
      <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/210221245454422.jpg" alt=""></li>
      <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic2@main/image/QQ%E6%88%AA%E5%9B%BE20210126213101.jpg"
          alt=""></li>
      <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image20200424001404.jpg"
          alt=""></li>
      <li><img src="https://cdn.jsdelivr.net/gh/Anyway521/blogpic@main/image/image2020041501.gif"
          alt=""></li>
    </ul>
  </div>
</body>
<script>
  var orders = document.getElementById("order")
  var orderItems = orders.getElementsByTagName("li")
  var contents = document.getElementById("content")
  var contentItems = contents.getElementsByTagName("li")
  var n = orderItems.length
  for (let i = 0; i < n; i++) {
      orderItems[i].onclick = function () {
      for(let j = 0;j<n;j++){
          if(j== i){
            contentItems[j].style.display = "block"
            // contentItems[j].setAttribute("class","on")
          }else{
            contentItems[j].style.display = "none"
            // contentItems[j].removeAttribute("class")
          }
        }
      }
    }

</script>

</html>